<template>
	<view class="container">
		<view class="content">
			<!-- <view class="plan-box">
        <view class="plan-top">
          <view class="icon_box">
            <image
              src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_plan.png"
              mode="scaleToFill"
              class="icon"
            />
          </view>
          <view class="title">每周工作计划</view>
        </view>
        <textarea
          class="text-input"
          placeholder-class="input-placeholder"
          rows="10"
          :placeholder="placeholder"
          maxlength="10000"
        ></textarea>
        <view class="plant-btn">点击上传工作计划表</view>
      </view> -->
			<view class="plan" v-for="(plan, index) in plans" :key="index">
				<view class="plan-top">
					<view class="icon_box">
						<image :src="plan.coverImg" mode="scaleToFill" class="icon" />
					</view>
					<view class="info">
						<view class="title">{{ plan.title }}</view>
						<view class="num">
							<view class="point"></view>
							<view class="current">{{ plan.finishAmount }}</view>
							<view class="total">/{{ plan.limitAmount }}</view>
						</view>
					</view>
				</view>
				<view class="imgsbox">
					<image class="img" v-for="(t, idx) in plan.detailImg" :key="idx" :src="t" mode="aspectFill" @lookImg="lookImg(t)" />
					<image class="img" style="height: 0"></image>
				</view>
				<view class="des">{{ plan.content }}</view>
				<view class="plant-btn" @click="toDetail(plan)">打卡(上传图片)</view>
			</view>
			<view v-if="plans.length == 0" style="width: 100%; text-align: center; margin-top: 200rpx">
				<image
					style="width: 500rpx"
					mode="widthFix"
					src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
				/>
			</view>
			<view class="remark">更多每月计划敬请期待</view>
		</view>
	</view>
</template>

<script>
import { getTaskList } from '@/api/yanxue/user'
export default {
	data() {
		return {
			// placeholder: `在此处输入每月工作计划 \n1、...... \n2、...... \n3、...... \n4、...... \n5、...... \n6、....`,
			plans: [],
			type: ''
		}
	},
	onLoad(options) {
		this.type = options.type
	},
	onShow() {
		this.getData()
	},
	methods: {
		toDetail(item) {
			this.$navTo('pagesA/mine/planb?id=' + item.id)
		},
		getData() {
			getTaskList({ type: this.type == 'day' ? 1 : 2 }).then(res => {
				res.result.map(x => {
					x.detailImg = x.detailImg.split(',').filter(x => x != '')
				})
				this.plans = res.result
			})
		},
		lookImg(path) {
			uni.previewImage({
				urls: this.plans.detailImg,
				current: path
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.container {
	background: linear-gradient(0deg, #c1f26c 0%, #ffffff 100%);
	padding-bottom: 48rpx;
	padding-top: 32rpx;
	height: 100vh;
	overflow: scroll;
}

.content {
	width: 702rpx;
	background: #ffffff;
	box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
	border-radius: 20rpx;
	margin: 0 auto;
	padding: 32rpx 0;
}

.plan-box {
	background: #fff;
	padding: 20rpx;
	margin: 0 auto;
	margin-bottom: 32rpx;
	width: 648rpx;
	height: 810rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.2);
	border-radius: 64rpx;

	.plan-top {
		display: flex;
		align-items: center;
		margin-left: 46rpx;
		margin-bottom: 38rpx;

		.icon_box {
			width: 91rpx;
			height: 91rpx;
			background: #f95513;
			border-radius: 45rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 60rpx;
				height: 68rpx;
			}
		}

		.title {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111827;
			line-height: 36rpx;
			margin-left: 32rpx;
		}
	}

	.text-input {
		width: 502rpx;
		height: 368rpx;
		background: #ffffff;
		border-radius: 48rpx;
		border: 4rpx solid #cbd5e0;
		padding: 40rpx 48rpx;
	}

	.input-placeholder {
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #cacaca;
	}

	.plant-btn {
		width: 557rpx;
		height: 91rpx;
		background: #f95513;
		border-radius: 45rpx;
		text-align: center;
		line-height: 91rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 54rpx;
	}
}

.plan {
	background: #fff;
	padding: 46rpx;
	margin: 0 auto;
	margin-bottom: 32rpx;
	width: 648rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.2);
	border-radius: 64rpx;
	.imgsbox {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.img {
			width: 242rpx;
			height: 162rpx;
			margin-bottom: 20rpx;
		}
	}
	.plan-top {
		display: flex;
		align-items: center;

		.icon_box {
			width: 91rpx;
			height: 91rpx;
			background: #f95513;
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 32rpx;

			.icon {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.info {
			.title {
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #111827;
				line-height: 30rpx;
			}

			.num {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.point {
					width: 15rpx;
					height: 15rpx;
					background: #a2ff00;
					border-radius: 50%;
					margin-right: 14rpx;
				}

				.current,
				.total {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #718096;
					line-height: 26rpx;
				}
			}
		}
	}

	.des {
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #718096;
		line-height: 42rpx;
		margin-top: 44rpx;
	}

	.plant-btn {
		width: 557rpx;
		height: 91rpx;
		background: #f95513;
		border-radius: 45rpx;
		text-align: center;
		line-height: 91rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 54rpx;
	}
}

.remark {
	font-family: HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 22rpx;
	color: #656565;
	text-align: center;
}
</style>
